@use "@/styles/variables"as *;

.#{$name}-swiper {
    $self: &;

    &__nav {
        width: 100%;
        background-color: #fff;
        position: fixed;
        display: flex;
        z-index: 1;
        align-items: center;
        min-height: 44px;
        border-bottom: 1px solid #e5e5e5;
        justify-content: space-between;
        padding: 0 12px;

        &-op {
            border-color: transparent;
            background: transparent;
            
            &>#{$self}__nav-btn {
                color: #fff !important;
                background-color: #666 !important;
            }
        }


    }

    &__nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-size: 20px;
        border-radius: 20px;

        text-align: center;


        -webkit-transition: background-color .2s ease;
        transition: background-color .2s ease;
    }

    &__nav-tab {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0 16px;

        -webkit-transition: opacity .3s ease;
        transition: opacity .3s ease;

        &__item {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            text-align: center;
            margin: 0 16px;
            position: relative;

            -webkit-transition: color .3s cubic-bezier(.28, .6, .2, 1);
            transition: color .3s cubic-bezier(.28, .6, .2, 1);

            &__title {
                font-size: 14px;
                text-align: center;
            }

            &-active::after {
                position: absolute;
                content: '';
                width: 100%;
                left: 0;
                height: 3px;
                background-color: #ff5a5f;
                transition: all 0.2s ease;
            }

        }
    }

    &__wrap {
        display: flex;
        flex-direction: column;

        &__slide {
            min-height: 50vh;
            transform: translateZ(0);
            transition: all 0.2s ease;
        }
    }
}